<template>
  <el-input v-model="obj.text"></el-input>
  <el-button @click="show">弹出二维码</el-button>

  <el-dialog v-model="obj.visible" title="二维码">
    <img :src="obj.codeUrl" alt="">
  </el-dialog>
</template>

<script setup>
  import {reactive} from "vue";
  import QRCode from "qrcode";
  import {ElMessage} from "element-plus";

  let obj = reactive({
    visible: false, // 窗口是否显示
    codeUrl: null, // 二维码图片URL
    text: null,   // 二维码内容
  })

  const options = {
    width: 300,  // 二维码的宽度
    height: 300, // 二维码的高度
    color: {
      dark: '#199',  // 二维码的前景色（黑色）
      light: '#ffffff'  // 二维码的背景色（白色）
    }
  };

  // 弹出
  let show = () => {
    obj.visible = true
    // 二维码获取
    QRCode.toDataURL(obj.text,options,function (err, url) {
      if(err){
        ElMessage.error("二维码生成失败")
      }else{
        obj.codeUrl = url;
      }
    })
  }
</script>

<style scoped>

</style>